import { Button, Space } from '@mao-fu/sun-ui';
import React from 'react';

const App: React.FC = () => {
  return (
    <>
      <Space>
        <Button
          disabled
          theme="light"
          type="primary"
          onClick={() => {
            alert('click');
          }}
        >
          Click me
        </Button>
        <Button
          disabled
          theme="light"
          type="secondary"
          onClick={() => {
            alert('click');
          }}
        >
          Click me
        </Button>
        <Button
          disabled
          theme="light"
          type="tertiary"
          onClick={() => {
            alert('click');
          }}
        >
          Click me
        </Button>
        <Button
          disabled
          theme="light"
          type="warning"
          onClick={() => {
            alert('click');
          }}
        >
          Click me
        </Button>
        <Button
          disabled
          theme="light"
          type="danger"
          onClick={() => {
            alert('click');
          }}
        >
          Click me
        </Button>
      </Space>
      <hr></hr>
      <Space>
        <Button
          disabled
          theme="solid"
          type="primary"
          onClick={() => {
            alert('click');
          }}
        >
          Click me
        </Button>
        <Button
          disabled
          theme="solid"
          type="secondary"
          onClick={() => {
            alert('click');
          }}
        >
          Click me
        </Button>
        <Button
          disabled
          theme="solid"
          type="tertiary"
          onClick={() => {
            alert('click');
          }}
        >
          Click me
        </Button>
        <Button
          disabled
          theme="solid"
          type="warning"
          onClick={() => {
            alert('click');
          }}
        >
          Click me
        </Button>
        <Button
          disabled
          theme="solid"
          type="danger"
          onClick={() => {
            alert('click');
          }}
        >
          Click me
        </Button>
      </Space>
      <hr />
      <Space>
        <Button
          disabled
          theme="outline"
          type="primary"
          onClick={() => {
            alert('click');
          }}
        >
          Click me
        </Button>
        <Button
          disabled
          theme="outline"
          type="secondary"
          onClick={() => {
            alert('click');
          }}
        >
          Click me
        </Button>
        <Button
          disabled
          theme="outline"
          type="tertiary"
          onClick={() => {
            alert('click');
          }}
        >
          Click me
        </Button>
        <Button
          disabled
          theme="outline"
          type="warning"
          onClick={() => {
            alert('click');
          }}
        >
          Click me
        </Button>
        <Button
          disabled
          theme="outline"
          type="danger"
          onClick={() => {
            alert('click');
          }}
        >
          Click me
        </Button>
      </Space>
      <hr />
      <Space>
        <Button
          disabled
          theme="borderless"
          type="primary"
          onClick={() => {
            alert('click');
          }}
        >
          Click me
        </Button>
        <Button
          disabled
          theme="borderless"
          type="secondary"
          onClick={() => {
            alert('click');
          }}
        >
          Click me
        </Button>
        <Button
          disabled
          theme="borderless"
          type="tertiary"
          onClick={() => {
            alert('click');
          }}
        >
          Click me
        </Button>
        <Button
          disabled
          theme="borderless"
          type="warning"
          onClick={() => {
            alert('click');
          }}
        >
          Click me
        </Button>
        <Button
          disabled
          theme="borderless"
          type="danger"
          onClick={() => {
            alert('click');
          }}
        >
          Click me
        </Button>
      </Space>
      <hr />
      <Button
        disabled
        loading={true}
        type="primary"
        onClick={() => {
          alert('click');
        }}
      >
        Click me
      </Button>
    </>
  );
};

export default App;
